<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="../../../javascript/react.js"></script>
<script src="../../../javascript/react-dom.js"></script>
<script src="../../../javascript/babel.js"></script>
<script type="text/babel">
    /*
    *  React中的列表渲染需要使用map高阶函数，map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
    */
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                persons: [
                    {id: 1, name: "马云", age: 18},
                    {id: 2, name: "马化腾", age: 15},
                    {id: 3, name: "马保国", age: 10},
                ]
            }
        }

        render() {
            const {persons} = this.state
            return (
                <ul>
                    {
                        persons.filter(item => item.age >= 18).map(item => <li key={item.id}>id：{item.id} 姓名：{item.name} 年龄：{item.age}</li>)
                    }
                </ul>
            )
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>
</html>
